<template>
    <div class="container-header-margin" style="min-height: 90vh;">
        <!-- <div class="empty">
            <a-row :gutter="[24, 24]">
                <a-col :span="24">
                    <a-empty description="暂无奖状" />
                </a-col>
            </a-row>
        </div> -->
        <a-upload-dragger name="file" multiple :action="uploadUrl" @change="handleUploadChange"
            @drop="handleUploadDrop">
            <p class="ant-upload-drag-icon">
                <InboxOutlined />
            </p>
            <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
            <p class="ant-upload-hint">
                支持单个或批量上传。
            </p>
        </a-upload-dragger>
        <div class="award-cards-container">
            <div class="award-card">
                <div class="award-card-paper">
                    <a-image width="80%"
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </div>
                <div class="award-card-body">
                    <div class="awrd-card-header">
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状名:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状级别:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状类型:</span>
                        </div>
                    </div>
                    <div class="team-card-footer">
                        <a-button type="primary" class="join-button" shape="round" @click="applyToTeam(team)">
                            审核中
                        </a-button>
                    </div>

                </div>
            </div>
            <div class="award-card">
                <div class="award-card-paper">
                    <a-image width="80%"
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </div>
                <div class="award-card-body">
                    <div class="awrd-card-header">
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状名:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状级别:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状类型:</span>
                        </div>
                    </div>
                    <div class="team-card-footer">
                        <a-button type="primary" class="join-button" shape="round" @click="applyToTeam(team)">
                            审核中
                        </a-button>
                    </div>

                </div>
            </div>
            <div class="award-card">
                <div class="award-card-paper">
                    <a-image width="80%"
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </div>
                <div class="award-card-body">
                    <div class="awrd-card-header">
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状名:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状级别:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状类型:</span>
                        </div>
                    </div>
                    <div class="team-card-footer">
                        <a-button type="primary" class="join-button" shape="round" @click="applyToTeam(team)">
                            审核中
                        </a-button>
                    </div>

                </div>
            </div>
            <div class="award-card">
                <div class="award-card-paper">
                    <a-image width="80%"
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </div>
                <div class="award-card-body">
                    <div class="awrd-card-header">
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状名:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状级别:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状类型:</span>
                        </div>
                    </div>
                    <div class="team-card-footer">
                        <a-button type="primary" class="join-button" shape="round" @click="applyToTeam(team)">
                            审核中
                        </a-button>
                    </div>

                </div>
            </div>
            <div class="award-card">
                <div class="award-card-paper">
                    <a-image width="80%"
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </div>
                <div class="award-card-body">
                    <div class="awrd-card-header">
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状名:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状级别:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状类型:</span>
                        </div>
                    </div>
                    <div class="team-card-footer">
                        <a-button type="primary" class="join-button" shape="round" @click="applyToTeam(team)">
                            审核中
                        </a-button>
                    </div>

                </div>
            </div>
            <div class="award-card">
                <div class="award-card-paper">
                    <a-image width="80%"
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </div>
                <div class="award-card-body">
                    <div class="awrd-card-header">
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状名:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状级别:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状类型:</span>
                        </div>
                    </div>
                    <div class="team-card-footer">
                        <a-button type="primary" class="join-button" shape="round" @click="applyToTeam(team)">
                            审核中
                        </a-button>
                    </div>

                </div>
            </div>
            <div class="award-card">
                <div class="award-card-paper">
                    <a-image width="80%"
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </div>
                <div class="award-card-body">
                    <div class="awrd-card-header">
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状名:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状级别:</span>
                        </div>
                        <div class="award-title">
                            <user-outlined />
                            <span>奖状类型:</span>
                        </div>
                    </div>
                    <div class="team-card-footer">
                        <a-button type="primary" class="join-button" shape="round" @click="applyToTeam(team)">
                            审核中
                        </a-button>
                    </div>

                </div>
            </div>

        </div>

    </div>


</template>

<script setup>
// import { getExtracttext } from "@/api/index";

import { message } from "ant-design-vue";
import { UserOutlined, InboxOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";


</script>

<style scoped lang="less">
@card-bg: #fff;
@text-color: #333;
@text-secondary: #666;
@border-radius: 12px;
@box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);


.empty {
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.award-cards-container {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 40px;
    gap: 20px;

    .award-card {
        background-color: @card-bg;
        border-radius: @border-radius;
        box-shadow: @box-shadow;
        transition: all 0.3s ease;
        // height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 20px;
        width: calc((100% - 4 * 20px) / 5);
        margin-bottom: 20px;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }


        .award-card-paper {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;

        }

        .award-card-body {
            margin-top: 20px;

            .award-title {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 8px;
                font-size: 14px;
                color: @text-secondary;
            }
        }


    }

}
</style>